import React, {useState} from "react";
import {Link, Outlet} from "react-router-dom";
import {Menu} from 'antd';
import './Guide.css';  // 导入自己写好的静态css文件
import Icon, {HeartOutlined} from '@ant-design/icons';


function Guide() {
    const [current, setCurrent] = useState('index');

    function handleClick(e) {
        console.log("click", e.key);
        setCurrent(e.key);
    }

    return (
        <div>
            <nav> {/* 作为一级导航 */}
                <Menu onClick={handleClick}  selectedKeys={[current]} mode="horizontal" theme="light">
                    <Menu.Item key="home" icon={<HeartOutlined/>}>
                        <Link to="/home">主页</Link>
                    </Menu.Item>
                    <Menu.Item key="help" icon={<HeartOutlined/>}>
                        <Link to="/help">帮助</Link>
                    </Menu.Item>
                    <Menu.Item  key="purpose" icon={<HeartOutlined/>}>
                        <Link to="/about">开发目的</Link>
                    </Menu.Item>
                </Menu>
            </nav>
            <Outlet/>
        </div>
    );
}

export default Guide;